.MechanicalTrajectory {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;

	& > .MechanicalTrajectoryMap {
		width: 100%;
		height: 100%;
	}

	& > .Mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		pointer-events: none;
	}

	& > .MechanicalTrajectoryList {
		position: absolute;
		right: 16px;
		top: 240px;
		bottom: 40px;
		width: 400px;
		z-index: 1;
		overflow: hidden;

		.ALL {
			position: absolute;
			left: 0;
			bottom: 8px;
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
		}
		.List {
			height: calc(100% - 50px);
			overflow-y: scroll;
			position: relative;

			& > .Box {
				width: 100%;
				border-bottom: 1px solid #ffffff;

				& > .Title {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					height: 52px;
					cursor: pointer;
					text-indent: 16px;
					font-size: 18px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #ffffff;
				}

				& > .Content {
					border-top: 1px dashed #ffffff;
					padding: 16px;

					& > .Options {
						height: 40px;
						background: rgba(255, 255, 255, 0.35);
						border-radius: 8px;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding: 0 16px;

						& > span {
							margin: 0 8px;
							font-size: 24px;
							cursor: pointer;
						}
					}

					& > .Text {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						flex-wrap: wrap;

						& > div {
							display: flex;
							align-items: flex-start;
							justify-content: flex-start;
							margin: 4px 0;

							&.one {
								width: 50%;
							}

							&.all {
								width: 100%;
							}

							& > div:first-child {
								width: 80px;
								font-size: 16px;
								font-family: ShuHeiTi;
								font-weight: bold;
								color: #ffffff;
							}

							& > div:last-child {
								font-size: 14px;
								font-family: ShuHeiTi;
								font-weight: 400;
								color: #ffffff;
							}
						}
					}
				}
			}
		}
	}
}

.MechanicalTrajectoryModal {
	& > .ant-modal-content {
		padding: 0;
		background-color: transparent;

		.ant-modal-close-x {
			color: #fff;
		}

		.Content {
			height: 80vh;
			width: 100%;
			padding: 16px;
			display: flex;
			align-items: center;
			justify-content: center;

			& > div {
				height: 100%;
				border: 1px solid var(--ItemTitleTwoModalTableFixBack);
				border-radius: 8px;
				background: rgba(0, 0, 0, 0.5);
				padding: 16px;
				overflow: hidden;

				&.Left {
					width: 280px;
					margin-right: 16px;

					& > .List {
						padding: 8px 0;
						height: calc(100% - 24px);
						overflow-y: scroll;

						&::-webkit-scrollbar {
							display: none;
						}
					}
				}

				&.Right {
					flex: 1;
					position: relative;

					& > .MechanicalTrajectoryMap {
						width: 100%;
						height: 100%;
					}

					& > .VideoBox {
						position: absolute;
						left: 16px;
						top: 16px;
						width: calc(100% - 32px);
						height: calc(100% - 32px);
						z-index: 1;

						& > .Close {
							position: absolute;
							z-index: 2;
							top: 0;
							right: 0;
							width: 40px;
							height: 40px;
							background-color: rgba(0, 0, 0, 0.5);
							display: flex;
							align-items: center;
							justify-content: center;
							color: white;
							font-size: 24px;
							border-radius: 0% 100% 0% 100% / 52% 0% 100% 48%;
							cursor: pointer;
						}
					}

					& > .AdditionalBox {
						position: absolute;
						left: 16px;
						top: 16px;
						width: 320px;
						height: 410px;
						border-radius: 8px;
						background: white;

						:where(.css-dev-only-do-not-override-htwhyh).ant-picker-calendar
							.ant-picker-cell
							.ant-picker-cell-inner {
							height: auto;
						}

						.ant-picker-calendar-month-select {
							display: none;
						}

						& > .DraggableTitle {
							height: 40px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20px;
							font-family: ShuHeiTi;
							font-weight: bold;
							color: rgba(1, 59, 156, 0.8);
						}
						& > .ant-picker-calendar {
							box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
								0 3px 6px -4px rgba(0, 0, 0, 0.12),
								0 9px 28px 8px rgba(0, 0, 0, 0.05);
						}
						& > .ant-picker {
							margin: 8px;
						}
					}
				}
			}
		}
	}
}
